import React from 'react';

import { Tabs, Form, Input, Button, Modal, Row, Col } from 'antd';

import { FormInstance } from 'antd/lib/form';

const { TabPane } = Tabs;

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

const tailLayout = {
  wrapperCol: { offset: 5, span: 19 },
};

export default class Message extends React.Component{
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Tabs defaultActiveKey="1" onChange={() => {}}>
					<TabPane tab="登录密码" key="1">
						<LoginPassword/>
					</TabPane>
					<TabPane tab="支付密码" key="2">
						<PayPassword/>
					</TabPane>
				</Tabs>
			</div>
		)
	}
}

class ModalPassword extends React.Component{
	formRef = React.createRef<FormInstance>();
	state = {
		confirmLoading: false
	}
	render(){
		return (
			<>
				<Modal
			        title="找回支付密码"
			        visible={this.props.visible}
					footer={null}
			        onCancel={() => {
			        	this.props.onSuccess()
			        }}
			    >
			    	<Form {...layout} ref={this.formRef}>
			    		<Form.Item
	                        name="value1"
	                        label="验证手机号："
	                        rules={[{ required: true, message: '请输入手机号码!' }]}
	                    >
	                        <Input placeholder="请输入验证手机号" />
	                    </Form.Item>
	                    <Form.Item
		                    name="value2"
	                        label="短信验证码："
	                        rules={[{ required: true, message: '请输入手机号码!' }]}
	                    >
	                    	<Row gutter={8}>
	                    		<Col span={16}>
	                    			<Input placeholder="请输入短信验证码" />
	                    		</Col>
	                    		<Col span={8}>
	                    			<Button style={{width: '100%'}} type="primary">获取验证码</Button>
	                    		</Col>
	                    	</Row>
	                        
	                    </Form.Item>
	                    <Form.Item
	                        name="value3"
	                        label="设置新密码："
	                        rules={[{ required: true, message: '请输入手机号码!' }]}
	                    >
	                        <Input placeholder="请输入新的支付密码" />
	                    </Form.Item>
	                    <Form.Item {...tailLayout}>
	                    	<Button type="primary" onClick={ () => {
	                    		this.props.onSuccess()
	                    	}}>
				                提交
				            </Button>
	                    </Form.Item>
			    	</Form>
			    </Modal>
			</>
		) 
	}
}


class PayPassword extends React.Component {
	state = {
		visible: false
	}
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<div style={{width: 520,padding: '80px 0',margin: 'auto'}}>
				<Form {...layout} ref={this.formRef}>
					<Form.Item
                        name="value1"
                        label="原密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入原支付密码(第一次设置请留空)" />
                    </Form.Item>
                    <Form.Item
                        name="value2"
                        label="新密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入新密码" />
                    </Form.Item>
                    <Form.Item
                        name="value3"
                        label="确认密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入确认密码" />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                    	<span onClick={ () => this.setState({visible: true}) } style={{cursor: 'pointer',color: '#1890ff'}}>忘记密码→</span>
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                    	<Button type="primary">
			                提交
			            </Button>
			            <Button style={{ margin: '0 8px' }}>
			                重置
			            </Button>
                    </Form.Item>
                </Form>
                <ModalPassword visible={this.state.visible} onSuccess={ () => this.setState({visible: false}) }/>
			</div>
		)
	}
}


class LoginPassword extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<div style={{width: 520,padding: '80px 0',margin: 'auto'}}>
				<Form {...layout} ref={this.formRef}>
					<Form.Item
                        name="value1"
                        label="原密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入原支付密码(第一次设置请留空)" />
                    </Form.Item>
                    <Form.Item
                        name="value2"
                        label="新密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入新密码" />
                    </Form.Item>
                    <Form.Item
                        name="value3"
                        label="确认密码："
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入确认密码" />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                    	<Button type="primary">
			                提交
			            </Button>
			            <Button style={{ margin: '0 8px' }}>
			                重置
			            </Button>
                    </Form.Item>
				</Form>
			</div>
		)
	}
}